<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输权限名称" clearable v-model="name" @clear="searchPermission">
                        <el-button slot="append" icon="el-icon-search" @click="searchPermission"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogFormVisible = true" >添加权限</el-button>
                </el-col>
            </el-row>
            <el-table :data="permissionList" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="权限名称" prop="name"></el-table-column>
                <el-table-column label="权限路径" prop="url"></el-table-column>
                <el-table-column label="权限类型">
                    <template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removePermissionById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>

            <el-dialog title="添加权限" :visible.sync="dialogFormVisible" width="40%">
                <el-form :model="form" ref="form">
                    <el-form-item label="一级菜单" :label-width="formLabelWidth">
                        <el-select v-model="form.parentId" placeholder="请选择活动区域">
                            <el-option label="请选择" :value="0"></el-option>
                            <el-option :label="item.name" :value="item.id" v-for="item in firstLevelPermissionList" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="权限名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="请求路径" :label-width="formLabelWidth">
                        <el-input v-model="form.url" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dialogFormVisible: false,
                formLabelWidth: '100px',
                pageNum: 1,
                pageSize: 5,
                permissionList: [],
                firstLevelPermissionList: [],//一级菜单
                total: 0,
                name: "", //权限名称
                urlTypeDesc: "菜单权限",
                form:{
                    name:'',
                    url:'',
                    parentId:0
                },
                originForm:{
                    name:'',
                    url:'',
                    parentId:0
                }
            };
        },
        methods: {
            submitForm(){
                this.$axios({
                    url:this.$baseurl.dev+'manager/addPermission',
                    method:'post',
                    data:this.form
                }).then(res=>{
                    if(res.data.code==200){
                        //关闭窗口，清空form的数据
                        this.cancelForm();
                        //重新读取列表
                        this.reloadData();
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error',
                            duration: 1000
                        });
                    }
                    console.log('queryFirstLevelPermission',res)
                })
            },
            cancelForm(){
                this.dialogFormVisible = false;
                this.$refs.form.resetFields();
                this.form=this.originForm;
            },
            handleSizeChange(pageSize){
                this.pageSize=pageSize;
                this.reloadData();
            },
            handleCurrentChange(pageNum){
                this.pageNum=pageNum
                this.reloadData();
            },
            searchPermission(){
                this.reloadData();
            },
            showEditDialog(obj){

            },
            removePermissionById(id){

            },
            //查询一级菜单
            queryFirstLevelPermission(){
                this.$axios({
                    url:this.$baseurl.dev+'manager/queryFirstLevelPermission',
                    method:'get'
                }).then(res=>{
                    if(res.data.code==200){

                        this.firstLevelPermissionList=res.data.data;
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error',
                            duration: 1000
                        });
                    }
                    console.log('queryFirstLevelPermission',res)
                })
            },
            reloadData(){
                this.$axios({
                    url:this.$baseurl.dev+'manager/queryPermissionWithPage',
                    method:'get',
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        name:this.name
                    }
                }).then(res=>{
                    if(res.data.code==200){
                        this.permissionList=res.data.data.list;
                        this.total=res.data.data.total;
                        console.log('reloadData',res)
                    }else{
                        this.$message({
                            message: res.data.message,
                            type: 'error',
                            duration: 1000
                        });
                    }

                })
            }
        },
        created() {
            this.reloadData();
            this.queryFirstLevelPermission();
        }
    };
</script>
<style lang="less" scoped>
</style>
